<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        window.onload = function () {
            // 获取所有复选框
            var items = document.getElementsByName("items");
            // 全选/全不选复选框
            var checkedAllBox = document.getElementById("checkedAllBox");

            // 全选 checkedAllBtn
            var checkedAllBtn = document.getElementById("checkedAllBtn");
            checkedAllBtn.onclick = function () {
                for (let i = 0; i < items.length; i++) {
                    items[i].checked = true;
                }
                // 全选/全不选复选框也需被选中
                checkedAllBox.checked = true;
            }

            // 全不选 checkedNoBtn
            var checkedNoBtn = document.getElementById("checkedNoBtn");
            checkedNoBtn.onclick = function () {
                for (let i = 0; i < items.length; i++) {
                    items[i].checked = false;
                }
                // 全选/全不选复选框也需被取消
                checkedAllBox.checked = false;
            }

            // 反选 checkedRevBtn
            var checkedRevBtn = document.getElementById("checkedRevBtn");
            checkedRevBtn.onclick = function () {
                for (let i = 0; i < items.length; i++) {
                    items[i].checked = !items[i].checked;
                }
                // 更新全选/全不选复选框的状态
                checkedAllBox.checked = Array.from(items).every(item => item.checked);
            }

            // 全选/全不选 checkedAllBox
            checkedAllBox.onclick = function () {
                for (let i = 0; i < items.length; i++) {
                    items[i].checked = this.checked;
                }
            }

            // 提交 sendBtn 点击提交弹出所有的选中的框中的value属性值
            var sendBtn = document.getElementById("sendBtn");
            sendBtn.onclick = function () {
                let selectedValues = [];
                for (let i = 0; i < items.length; i++) {
                    if (items[i].checked) {
                        selectedValues.push(items[i].value);
                    }
                }
                alert('你选择的运动有：' + selectedValues.join(', '));
            }

            // 如果四个多选框都选中了，checkedAllBox也被选中；如果四个多选框有一个未选中，checkedAllBox不被选中
            // 遍历每个items元素，为它们添加点击事件监听器
            for (let i = 0; i < items.length; i++) {
                // 当某个item被点击时，执行以下函数
                items[i].onclick = function () {
                    // 将所有items元素的checked属性进行every检查，以确定全选框的选中状态
                    //every()方法返回一个布尔值，表示是否所有元素都满足条件
                    checkedAllBox.checked = Array.from(items).every(item => item.checked);
                }
            }

        }
    </script>
</head>
<body>
<form method="post" action="">
    你爱好的运动是？<input type="checkbox" id="checkedAllBox"/> 全选/全不选
    <br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球
    <br/>
    <input type="button" id="checkedAllBtn" value="全选"/>
    <input type="button" id="checkedNoBtn" value="全不选"/>
    <input type="button" id="checkedRevBtn" value="反 选"/>
    <input type="button" id="sendBtn" value="提 交"/>
</form>
</body>
</html>
